<template>
  <div class="dglpm">
    <div style="padding: 10px; box-sizing: border-box">
      <div style="display: flex; justify-content: space-between">
        <p class="title"><span></span>未到岗率预警排名</p>
        <!-- <p class="changeDate">
          <span
            v-for="(item, index) in date"
            :key="index"
            @click="change(index)"
            :class="item.isActive ? 'active' : 'nuActive'"
            style="cursor: pointer"
          >
            {{ item.time }}
          </span>
        </p> -->
      </div>
      <div id="mains"></div>
    </div>
  </div>
</template>
<script>
import { dutyStatisticsOrder } from "@/api/dgl";
import { visitorDataRank } from "@/api/dataScreeen";
export default {
  name: "APP",
  components: {},
  data() {
    return {
      date: [
        {
          time: "今日",
          isActive: true,
          id: 0,
        },
        {
          time: "近7天",
          isActive: false,
          id: 7,
        },
        {
          time: "近30天",
          isActive: false,
          id: 30,
        },
      ],
      arr: [
        {
          ranking: 1,
          value: 36,
          name: "霸州市开发区优艺幼儿园",
        },
        {
          ranking: 2,
          value: 54,
          name: "廊坊市安次区神韵幼儿园",
        },
        {
          ranking: 3,
          value: 29,
          name: "香河县品尚公学幼儿园",
        },
        {
          ranking: 4,
          value: 50,
          name: "永明金宝贝幼儿园",
        },
        {
          ranking: 5,

          value: 45,
          name: "三河市五公司幼儿园",
        },
        {
          ranking: 6,
          value: 29,
          name: "三河市艺德佳幼儿园",
        },
      ],
      fkpm: {
        day: 0,
      },
    };
  },
  methods: {
    init() {
      dutyStatisticsOrder({
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      }).then((res) => {
        console.log(res.data);
        res.data.forEach((item, index) => {
          this.arr[index].ranking = index + 1;
          this.arr[index].name = item.dwmc;
          this.arr[index].value = item.presence_rate;
        });
      });
    },
    createChart() {
      var rankings = [];
      var stationData = [];
      var values = [];
      let that = this;
      this.arr.forEach(function (item, index) {
        rankings.push(item.ranking);
        stationData.push(item.name);
        values.push(item.value);
      });
      var attackSourcesColor = [
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 1, color: "rgba(253, 155, 89, 1)" },
          { offset: 0, color: "rgba(243, 53, 86, 1)" },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 1, color: "rgba(255, 208, 76, 1)" },
          { offset: 0, color: "rgba(250, 131, 50, 1)" },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 1, color: "rgba(255, 237, 148, 1)" },
          { offset: 0, color: "rgba(247, 183, 50, 1)" },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 1, color: "rgba(24, 220, 232, 1)" },
          { offset: 0, color: "rgba(57, 92, 253, 1)" },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 1, color: "rgba(24, 220, 232, 1)" },
          { offset: 0, color: "rgba(57, 92, 253, 1)" },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 1, color: "rgba(24, 220, 232, 1)" },
          { offset: 0, color: "rgba(57, 92, 253, 1)" },
        ]),
      ];
      function dataFormat(data) {
        var arr = [];
        data.forEach(function (item, i) {
          let itemStyle = {
            color: attackSourcesColor[i],
          };
          arr.push({
            value: item,
            itemStyle: itemStyle,
          });
        });
        return arr;
      }
      var attackSourcesColor1 = ["#EC405A", "#FB8432", "#F7B731", "#395CFD"];
      function contains(arr, dst) {
        var i = arr.length;
        while ((i -= 1)) {
          if (arr[i] == dst) {
            return i;
          }
        }
        return false;
      }
      const main = that.$echarts.init(document.getElementById("mains"));
      var maxArr = new Array(this.arr[0].value);
      let option = {
        backgroundColor: "#fff",
        grid: {
          left: "2%",
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true,
          //containLabel 为 true 的时候：
          // grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
          // 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件
        },
        tooltip: {
          // 设置鼠标悬浮显示的样式 值
          trigger: "item",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            console.log(params);
            return params.name + " : " + params.value + "%";
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              margin: 30,
              fontSize: 14,
              // align: "left",
              padding: [3, 0, 0, 0],
              nt: {
                color: "#fff",
                backgroundColor: attackSourcesColor1[3],
                width: 200,
                height: 18,
                fontSize: 12,
                align: "center",
                borderRadius: 50,
                padding: [2, 0, 0, 0],
              },
              color: "#000",
              rich: {
                nt1: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[1],
                  width: 20,
                  height: 18,
                  fontSize: 12,
                  align: "center",
                  borderRadius: 50,
                  lineHeight: "5",
                  padding: [2, 0, 0, 0],
                  margin: [0, 0, 0, 0],
                  // padding:[0,0,2,0],
                },
                nt2: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[1],
                  width: 20,
                  height: 18,
                  fontSize: 12,
                  align: "center",
                  borderRadius: 50,
                  padding: [2, 0, 0, 0],
                },
                nt3: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[2],
                  width: 20,
                  height: 18,
                  fontSize: 12,
                  align: "center",
                  borderRadius: 50,
                  padding: [2, 0, 0, 0],
                },
                nt: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[3],
                  width: 20,
                  height: 18,
                  fontSize: 12,
                  align: "center",
                  borderRadius: 50,
                  padding: [2, 0, 0, 0],
                },
                title: {
                  backgroundColor: "#FFFFFF",
                  color: "#13213B",
                  width: 150,
                  align: "left",

                  fontSize: 14,
                  fontWeight: "400",
                },
              },
              formatter: function (value, index) {
                let newParamsName = "";
                if (value.length > 10) {
                  newParamsName = value.substring(0, 10) + "...";
                } else {
                  newParamsName = value;
                }
                // const paramsNameNumber = value.length; // 文字总长度
                // const provideNumber = 8; //一行显示几个字
                // const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                // if (paramsNameNumber > provideNumber) {
                //   for (let p = 0; p < rowNumber; p++) {
                //     const start = p * provideNumber;
                //     const end = start + provideNumber;
                //     const tempStr =
                //       p === rowNumber - 1
                //         ? value.substring(start, paramsNameNumber)
                //         : value.substring(start, end) + "\n";
                //     newParamsName += tempStr;
                //   }
                // } else {
                //   newParamsName = value;
                // }
                index = contains(stationData, value) + 1;
                if (index - 1 < 3) {
                  return [
                    "{title|" +
                      newParamsName +
                      "} " +
                      " " +
                      "{nt" +
                      "" +
                      index +
                      "|" +
                      index +
                      "}",
                  ].join("\n");
                } else {
                  return [
                    "{title|" + newParamsName + "} " + "{nt|" + index + "}",
                  ].join("\n");
                }
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: this.arr.map((item) => item.name),
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#3196fa",
                fontSize: "12",
              },
              formatter: "{value}",
            },
            // data: this.arr.map((item) => item.value),
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  global: false, // 缺省为 false
                },
              },
            },
            barWidth: 20,

            // data: values,
            data: this.arr.map((item, index) => ({
              value: item.value,
              itemStyle: {
                color: attackSourcesColor[index],
              },
              label: {
                show: true,
                position: "inside",
                formatter: 1000,
                color: "#EEF5FF",
              },
            })),
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 20,
            barGap: "-100%",
            data: maxArr,
            itemStyle: {
              normal: {
                color: "none",
                barBorderRadius: 30,
              },
            },
          },
        ],
      };
      main.setOption(option);
    },
    // change(index) {
    //   console.log(index);
    //   this.date.forEach((item, i) => {
    //     if (i == index) {
    //       console.log(item.id);
    //       this.fkpm.day = item.id;
    //       this.init(this.fkpm);
    //       setTimeout(() => {
    //         this.createChart();
    //       }, 500);
    //       item.isActive = !item.isActive;
    //     } else if (i != index) {
    //       item.isActive = false;
    //     }
    //   });
    // },
    // init(fkpm) {
    //   console.log(fkpm);
    //   let that = this;
    //   visitorDataRank(fkpm).then((res) => {
    //     console.log(res);
    //     if (res) {
    //       res.forEach((item, index) => {
    //         console.log(item.total);
    //         console.log(item.school_name);
    //         that.arr[index].value = item.total;
    //         that.arr[index].name = item.school_name;
    //       });
    //       console.log(that.arr);
    //     }
    //   });
    // },
  },
  created() {},
  mounted() {
    this.init();
    setTimeout(() => {
      this.createChart();
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>
.active {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 500;
  color: #126bff;
}
.nuActive {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 500;
  color: #13213b;
}
#mains {
  width: 100%;
  height: 300px;
  // border: 1px red solid;
}
.dglpm {
  // border: 1px red solid;
  // overflow: auto;
}
.title span {
  box-sizing: border-box;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  line-height: 8px;
  background: #126bff;
  opacity: 1;
  margin: 4px;
}
.title {
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
  text-align: left;
}
.changeDate {
  width: 148px;
  height: 30px;
  line-height: 30px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #d7dbe3;
  float: right;
}
</style>
